<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			[v-cloak]{
				display: none;
			}
			/*解决闪烁问题*/
		</style>
	</head>
	<body>
		<!--
			m--页面的数据
			vm--数据调度者
			v--页面中的html结构
			mvvm的思想，主要是为了让我们的开发更加方便，
			因为MVVM提供了数据双向绑定;
			数据的双向绑定是由VM提供的
		-->
		<div id="vue_det"><!--v-->
			<h1 v-cloak>site : {{site}}</h1>
			<h1 v-cloak>url : {{url}}</h1>
			<h1 v-cloak>{{details()}}</h1>
		</div>
		<div id="app"></div>
		<script src="js/vue.min.js"></script>
		<script type="text/javascript">
			var vm=new Vue({   //vm
				el:'#vue_det',
				data:{//m
					site:"苏玄",
					url:"www.baidu.com",
					alexa:"10000"
				},
				
				methods:{
					details:function(){
						return this.site+"-学的不是技术，是硬伤！"
					}
				}
			})
			document.getElementById("app").innerText="苏玄"
		</script>
	</body>
</html>
